<template>
  <el-form :model="form" label-width="120px">
 
            <el-tabs type="border-card" class="demo-tabs">
      <el-tab-pane>
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><calendar /></el-icon>
            <span>基础</span>
          </span>
        </template> 

           <JmInput  jmname="标题" v-model="form.cate_name"   type="text"  ></JmInput>
           <JmInput  jmname="别名" v-model="form.alias_name"   type="text"  ></JmInput>
            <JmInput  jmname="唯一标识" v-model="form.guid"   type="text"  ></JmInput>
 
           <JmEnum jmname="导航" v-model="form.is_nav" :jv="{1: '是', 0: '否'}" jtype="2"  ></JmEnum>
           <JmEnum jmname="父栏目" v-model="form.parent_id" :jv="parent" jtype="4"  ></JmEnum>
            <JmEnum jmname="栏目类型" v-model="form.cate_model" :jv="{1:'单页',2:'文章',3:'图文'}" jtype="3"  ></JmEnum>
            <JmEnum jmname="显示" v-model="form.is_show" :jv="{1: '正常', 0: '禁用'}" jtype="2"  ></JmEnum>

<!-- 
  cate_icon
  cate_link 
parent_path
create_time
update_time
delete_time  
palette_color
is_defined  --> 

      </el-tab-pane>



      <el-tab-pane label="图片">
       
           <JmInput type="img" jmname="缩略图" v-model="form.cate_img"></JmInput> 
           <JmInput type="img" jmname="文章大图" v-model="form.cate_img_big"></JmInput>  
            
  
      </el-tab-pane>

      <el-tab-pane label="seo">
        <JmInput
          jmname="seo标题"
          v-model="form.seo"  
        ></JmInput>

        <JmInput
          jmname="关键词"
          v-model="form.keywords" 
          type="textarea"
        ></JmInput>

        <JmInput
          jmname="seo描述"
          v-model="form.description" 
          type="textarea"
        ></JmInput>
  
      </el-tab-pane>
      
      
      <el-tab-pane label="内容">
         
            <JmInput type="textarea" jmname="简介" v-model="form.introduce"></JmInput>
            <JmInput type="textarea" jmname="内容" v-model="form.content"></JmInput>
  
      </el-tab-pane>
      
      <el-tab-pane label="单页碎片">
  
            <div  v-for="item in  form.fragment" v-bind:key="key"  >
    
                    <JmInput  v-if="item.frag_type === 'text'"   type="text" :jmname="item.title" v-model="item.content"></JmInput>  
                    <JmInput  v-else-if="item.frag_type === 'num'" type="num" :jmname="item.title" v-model="item.content"></JmInput>
                    <JmInput  v-else-if="item.frag_type === 'password'" type="password" :jmname="item.title" v-model="item.content"></JmInput>
                    <JmInput  v-else-if="item.frag_type === 'textarea'" type="textarea" :jmname="item.title" v-model="item.content"></JmInput>
                    <JmInput  v-else-if="item.frag_type === 'date'" type="date" :jmname="item.title" v-model="item.content"></JmInput>
                    <JmInput  v-else-if="item.frag_type === 'datetime'" type="datetime" :jmname="item.title" v-model="item.content"></JmInput>
                    <JmInput  v-else-if="item.frag_type === 'time'" type="time" :jmname="item.title" v-model="item.content"></JmInput> 
                    <JmInput  v-else-if="item.frag_type === 'slider'" type="slider" :jmname="item.title" v-model="item.content"></JmInput>
                    <JmInput  v-else-if="item.frag_type === 'color'" type="color" :jmname="item.title" v-model="item.content"></JmInput>
                    <JmInput  v-else-if="item.frag_type === 'rate'" type="rate" :jmname="item.title" v-model="item.content"></JmInput> 
                    <JmInput  v-else-if="item.frag_type === 'img'" type="img" :jmname="item.title" v-model="item.content"></JmInput>  
                    <JmEnum  v-else-if="item.frag_type === 'radio'" :jmname="item.title" v-model="item.content" :jv="{1: '正常', 2: '禁用'}" jtype="2"  ></JmEnum> 
                    <JmEnum  v-else-if="item.frag_type === 'select'" :jmname="item.title" v-model="item.content" :jv="{1: '正常', 2: '禁用'}" jtype="4"  ></JmEnum>
                    <JmEnum  v-else-if="item.frag_type === 'selects'" :jmname="item.title" v-model="item.content" :jv="options" jtype="5"  ></JmEnum>
                    <el-form-item  v-else-if="item.frag_type === 'checkbox'"  label="多选">  
                              
                        <el-checkbox-group v-model="checkList">
                          <el-checkbox label="Option A" />
                          <el-checkbox label="Option B" />
                          <el-checkbox label="Option C" />
                          <el-checkbox label="disabled" disabled />
                          <el-checkbox label="selected and disabled" disabled />
                        </el-checkbox-group>
                    </el-form-item>
            <JmInput  v-else     type="text" :jmname="item.title" v-model="item.content"></JmInput>  
  
            </div>
      </el-tab-pane>
   

      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create</el-button> 
      </el-form-item>
    </el-tabs>
 
 
 
  </el-form>
</template>
 
<script>
import JmInput from "../../../components/form/JmInput.vue";
import JmEnum from "../../../components/form/JmEnum.vue";
export default {
  components: { JmInput, JmEnum },
  data() {
    return {
      key:"key",
         form: {
                  cate_name: "",
            alias_name: "",
            guid: "",
            cate_img: "",
            cate_link: "",
            parent_id: "", 
            cate_model: 1,
            content: "",
            seo: "", 
            keywords: "",
            description: "", 
            is_show: 1,
            palette_color: "",
            is_defined: "",
            cate_icon: "",
            introduce: "",
            cate_img_big: "",
            is_nav: 1,
 
            },

      cities :[
               
            ]
    };
  },
//在export default中添加即可不用管顺序
    watch: {
       //监听内容
       edit_id() {
        console.log("edit_id发生了变化");
        this.getDataList();
      }
    },
    props: ['edit_id'],
     inject:['handleClose'],
     
  mounted() {
    this.getDataList();
  },
  methods: {
    // 配置信息列表初始化
    async getDataList() {
      try {
        const res = await this.$api.getSingleFind({ids:this.edit_id}); 
   
       
       this.form=res;
  //  /*查看单条数据*/
  //       const find = await this.$api.editAdminFind({ids:this.edit_id}); 
  //       this.form.username=find.username;
  //       this.form.nickname=find.nickname;
  //       // this.form.password=find.password;
  //       this.form.avatar=find.avatar;
  //       this.form.group_id=find.group_id;
  //       this.form.status=find.status;
        
      } catch (error) {
        /*console.error(error);*/
      }
    },
     async onSubmit() {
       const find =  await this.$api.editSingle(this.form,this.edit_id);  
     
       this.$parent.$parent.$parent.$parent.handleClose();
            //  this.$parent.handleClose();
            // this.$emit("handleClose","如果需要传值，参数写在这里"); 
    },
  },
};
 
</script>